<template>
  <chart-wrap :title-name="'折线图'" :chart-obj="lineObj">
    <div ref="myChart"></div>
  </chart-wrap>
</template>

<script>
import { Line } from "@antv/g2plot";
import { onEvent } from '../common/index'
import ChartWrap from '@/components/common/ChartWrap'
export default {
  name: "LineChart",
  components: {
    ChartWrap
  },
  data() {
    return {
      source: [
        { year: "1991", value: 3 },
        { year: "1992", value: 4 },
        { year: "1993", value: 3.5 },
        { year: "1994", value: 5 },
        { year: "1995", value: 4.9 },
        { year: "1996", value: null },
        { year: "1997", value: 7 },
        { year: "1998", value: 9 },
        { year: "1999", value: 13 },
      ],
      lineObj: null,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$nextTick(() => {
        this.lineObj = new Line(this.$refs.myChart, {
          data: this.source,
          xField: "year",
          yField: "value",
          width: 400,
          height: 400,
          autoFit: true,
          smooth: true, // 曲线平滑
          connectNulls: false, // 缺失值是否折现断开
        });

        onEvent(this.lineObj, 'beforerender', () => {console.log('图表开始渲染')})

        this.lineObj.render();
      });
    },
  },
};
</script>

<style>
</style>